<!--
 * @Author: hq
 * @Date: 2022-05-27 14:18:02
 * @LastEditors: hq
 * @LastEditTime: 2022-08-02 14:18:20
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div>
    <div class="title">基本信息</div>
    <div class="row">
      <div class="col">
        <div>订单号：</div>
        <div>{{ rowData.oid }}</div>
      </div>
      <div class="col">
        <div>订单金额：</div>
        <div>{{ rowData.prices.actual }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>订单状态：</div>
        <div>{{ rowData.status }}</div>
      </div>
      <div class="col">
        <div>下单时间：</div>
        <div v-if="rowData.times">{{ rowData.times.pay_time }}</div>
      </div>
    </div>
    <div class="title">入住信息</div>
    <el-table
      border
      :data="rowData.extends.live_people"
      :header-cell-style="{
        'text-align': 'center',
      }"
      :cell-style="{ 'text-align': 'center' }"
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column prop="name" label="入住人姓名" min-width="15%">
      </el-table-column>
      <el-table-column prop="booking_phone" label="入住人电话" min-width="15%">
      </el-table-column>
      <el-table-column prop="room" label="入住房型" min-width="25%">
      </el-table-column>
      <el-table-column prop="room" label="入住时间" min-width="25%">
        <template slot-scope="scope">
          <div>{{ scope.row.live_in }} - {{ scope.row.live_out }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="live_day" label="居住天数" min-width="15%">
      </el-table-column>
    </el-table>
    <!-- <div class="row">
      <div class="col">
        <div>入住人姓名：</div>
        <div>
          <span
            v-for="(item, index) in rowData.extends.live_people"
            :key="index"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <div class="col">
        <div>入住人电话：</div>
        <div>{{ rowData.extends.booking_phone }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>入住时间：</div>
        <div>
          {{ rowData.extends.live_in }} - {{ rowData.extends.live_out }}
        </div>
      </div>
      <div class="col">
        <div>入住天数：</div>
        <div>{{ rowData.extends.live_nums }}</div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  props: ["rowData"],
  data() {
    return {
      url: "",
      pageType: "",
    };
  },
  methods: {},
  created() {},
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.row {
  display: flex;
  padding: 0 0 20px 20px;
  box-sizing: border-box;

  .col {
    width: 50%;
    display: flex;
    align-items: center;
    div:nth-child(1) {
      flex-shrink: 0;
    }
  }
}
</style>
